<template>
  <!-- <router-view/> -->
  <h2>{{name}}</h2>
  <h3>{{$store.state.username}}</h3>
  <button @click="btn1">改成李四</button>
  <button @click="btn2">改成王五</button>
</template>

<script>
import { toRef } from 'vue'
import { useStore } from 'vuex'
export default {
  setup () {
    const res = useStore()
    console.log(res)
    const name = toRef(res.state, 'username')
    const btn1 = () => {
      res.commit('Liname', '李四')
    }
    const btn2 = () => {
      res.dispatch('geiName')
    }
    return { name, btn1, btn2 }
  }
}
</script>

<style lang="less">

</style>
